import { useRef, useState, useEffect } from 'react'

function UseRef1 () {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')

  const countRef = useRef(0)
  const inputRef = useRef<HTMLInputElement>(null)
  const onClick = () => {
    const inputDOM = inputRef.current!

    console.log('获取到文本框的值为：', inputDOM.value)
  }

  // 验证 useRef() 创建的对象在组件更新期间保持（引用）不变
  //
  // 普通对象
  //   const user = { age: 18 }
  //   useEffect(() => {
  //     console.log('user effect run')
  //   }, [user])

  useEffect(() => {
    console.log('effect run')
  }, [countRef])

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />
      <div>
        <input type='text' ref={inputRef} />
        <button onClick={onClick}>获取文本框的值</button>
      </div>
    </div>
  )
}

export default UseRef1
